<script setup lang="ts">
  import { ref } from 'vue';
  import dayjs from 'dayjs';
  import { BasicTable, useTable } from '@/components/Table';
  import { GetTeamBillApi } from '@/api/group';

  const rangePresets = ref([
    { label: '今天', value: [dayjs(), dayjs()] },
    { label: '昨天', value: [dayjs().add(-1, 'd'), dayjs()] },
    { label: '最近7天', value: [dayjs().add(-7, 'd'), dayjs()] },
    { label: '最近14天', value: [dayjs().add(-14, 'd'), dayjs()] },
    { label: '最近30天', value: [dayjs().add(-30, 'd'), dayjs()] },
    { label: '最近90天', value: [dayjs().add(-90, 'd'), dayjs()] },
  ]);

  const [registerTable] = useTable({
    title: '团队业绩明细',
    columns: [
      {
        title: '下级账号',
        dataIndex: 'username',
        key: 'username',
      },
      {
        title: '收款总额',
        dataIndex: 'totalOrderAmount',
        key: 'totalOrderAmount',
      },
      {
        title: '收款笔数',
        dataIndex: 'totalOrderCount',
        key: 'totalOrderCount',
      },
      {
        title: '失败总额',
        dataIndex: 'totalFailureAmount',
        key: 'totalFailureAmount',
      },
      {
        title: '失败笔数',
        dataIndex: 'totalFailureCount',
        key: 'totalFailureCount',
      },
      {
        title: '接单返佣',
        dataIndex: 'commission',
        key: 'commission',
      },
      {
        title: '下级返点',
        dataIndex: 'myCommission',
        key: 'myCommission',
      },
      {
        title: '代付成功总额',
        dataIndex: 'jobstatus',
        key: 'jobstatus',
      },
      {
        title: '代付成功笔数',
        dataIndex: 'robstaus',
        key: 'robstaus',
      },
      {
        title: '代付失败总额',
        dataIndex: 'table',
        key: 'table',
      },
      {
        title: '代付失败笔数',
        dataIndex: 'table',
        key: 'table',
      },
      {
        title: '代付佣金',
        dataIndex: 'config',
        key: 'config',
      },
      {
        title: '更新时间',
        dataIndex: 'update_time',
        key: 'update_time',
        resizable: true,
      },
    ],
    bordered: true,
    showSelectionBar: false,
    showTableSetting: true,
    accordion: true, // 手风琴效果
    api: GetTeamBillApi,
    fetchSetting: {
      // The field name of the current page passed to the background
      pageField: 'page',
      // The number field name of each page displayed in the background
      sizeField: 'pageSize',
      // Field name of the form data returned by the interface
      listField: 'list',
      // Total number of tables returned by the interface field name
      totalField: 'total',
    },
    useSearchForm: true,
    takeCare: '这是注意事项',
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'username',
          label: '代理账号',
          component: 'Input',
          colProps: {
            span: 6,
          },
          componentProps: {
            placeholder: '请输入代理账号',
          },
        },
        {
          field: 'dateTime',
          label: '日期',
          component: 'RangePicker',
          colProps: {
            span: 6,
          },
          componentProps: {
            presets: rangePresets,
          },
        },
      ],
    },
  });
</script>
<template>
  <main>
    <a-row :gutter="16">
      <a-col :span="24" style="margin-top: 16px">
        <BasicTable @register="registerTable">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'update_time'">
              {{ dayjs(record.update_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </template>
        </BasicTable>
      </a-col>
    </a-row>
  </main>
</template>
